<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新阳教育</title>
    <link rel="stylesheet" href="../css/api.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .imgbox {
            position: relative;
        }
        
        .loginoutbox {
            position: absolute;
            right: -21px;
            top: 77px;
            width: 197px;
            line-height: 35px;
            background-color: #666;
            text-align: center
        }
        
        .play {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
        }
        
        .play .playbox {
            position: absolute;
            width: 1200px;
            height: 600px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
        }
        
        .play .playbox video {
            width: 100%;
            height: 100%;
        }
        
        .play .msk {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background-color: rgba(0, 0, 0, .6);
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="nav navbox">
            <div class="w1240 h">
                <div class="imgbox left">
                    <img src="../image/logo.png" alt="" class="logo"> PC课程端
                </div>
                <div class="tab">
                    <span :class="{active:selectIndex == index}" data-index="1" v-for="(item,index) in tabList" @click="fnTabbar(index,item.status)">{{item.name}}</span>
                    <!-- <span data-index="2">考核管理</span>
                    <span data-index="3">上课历史</span>
                    <span data-index="4">老师考核</span> -->
                </div>
                <div class="imgbox" @click="loginBox">
                    <img :src="teacherInfo.avatar" alt="" class="logo touxiang"> {{teacherInfo.name}}
                    <div class="loginoutbox" v-if="loginoutboxFlag" @click="loginOut">
                        退出账号
                    </div>
                </div>
            </div>

        </div>
        <div class="content">
            <div class="package">
                <template v-for="(item,index) in classList">
                    <div class="list">
                        <div class="time">
                            {{item.appoint_time}}
                        </div>
                        <div class="title">
                            {{item.class_name}}
                        </div>
                        <div class="order" ref="abc">
                            预约人 {{item.student_nickname}}
                            <div class="btn">
                                <span class="shangke" @click="fnStartClass(index)"  v-if="item.status == '未开始'">开始上课</span>
                                <!-- <span class="shangke" v-if="item.status == '已结束'" >已结束</span> -->
                                <span class="shangke" v-if="item.status == '已结束'"  @click="fnXuePingjia(item)" >写评价</span>
                                <span class="chakan" v-if="item.status != '已结束'" @click="fnTextBook(item.id)">查看教材</span>
                                <span class="chakan" v-if="item.status == '已结束'" @click="fnPlayBack(item.id)">查看回放</span>
                            </div>
                        </div>
                    </div>
                </template>
                <!-- <template v-for="(items,index) in appointment">
                    <div class="list">
                        <div class="time">
                            {{items.start_time}}
                        </div>
                        <div class="title">
                            {{items.live_name}}
                        </div>
                        <div class="order">
                            考核人 {{items.teacher_name}}
                            <div class="btn">
                                <span class="shangke" @click="fnStartClass()">开始上课</span>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-for="(items,index) in appointmented">
                    <div class="list">
                        <div class="time">
                            {{items.start_time}}
                        </div>
                        <div class="title">
                            {{items.live_name}}
                        </div>
                        <div class="order">
                            讲师 {{items.teacher_name}}
                            <div class="btn">
                                <span class="shangke" @click="fnStartClass()" >开始上课</span>
                            </div>
                        </div>
                    </div>
                </template>
            </div> -->
                <!-- <div class="package" v-if="!tabFlag">
                <template v-for="(item,index) in kaoheList">
                    <div class="list" >
                        <div class="time">
                            {{item.appoint_time}}
                        </div>
                        <div class="title">
                            授课资格考核
                        </div>
                        <div class="order">
                            被考核人 {{item.teacher_name}}
                            <div class="btn">
                                <span class="shangke" @click="fnStartClass(0)" v-if="item.is_end == 2">开始</span>
                                <span class="shangke" v-if="item.is_end == 1">已结束</span>
                                <span class="shangke" @click="fnPingjia(item)"  v-if="item.is_comment == 2 && item.is_end == 1" >填写评价</span>
                                <span class="shangke" @click="show(item.id)" v-if="item.is_comment == 1 && item.is_end == 1">查看评价</span>
                            <span class="shangke" @click="fnPingjia(item.id)"  >填写评价</span>
                                <span class="shangke" @click="show(item.id)" >查看评价</span>
                            </div>
                        </div>
                    </div>
                </template>
            </div> -->
            </div>
            <div class="defule" v-if="kechengFlag && !alertFlag">
                <img src="./../image/wuyuedu2.png" alt="">

                <p>{{kecheng}}</p>
            </div>
            <div class="tip_alert" v-if='alertFlag'>
                <div>{{text}}</div>
            </div>
            <div class="tianxie" v-if="laoshiP">
                <div class="tbox">
                    <img src="./../image/close.png" alt="" @click="fnClose()" class="close">
                    <div class="box">
                        <h3>填写评价</h3>
                        <div class="p1" v-if="status == 2">
                            <span>考核结果</span>
                            <i v-if="status == 2">
                            <span :class="{t1:status == 1,t2:status!=1,point:chakan}" @click="tongguo(1)">通过</span>
                            <span :class="{t1:status == 2,t2:status!=2,point:chakan}" @click="tongguo(2)">不通过</span>
                        </i>
                        </div>
                        <div class="p1" v-if="starFlag">
                            <span class="kh">能力评级</span>
                            <div class="tab" :class="{point:chakan}">
                                <img v-for="(star,index) in stars" v-bind:src="star.src" v-on:click="rating(index)" alt="星星图片" />
                            </div>
                        </div>
                        <div class="p1 p2">
                            <span>填写评语</span>
                            <textarea v-model="contents"></textarea>
                        </div>
                        <div class="btn" @click="fnSubmit" v-if="subFlag == 1">提交</div>
                    </div>
                </div>
                <div class="msk"></div>
            </div>
            <div class="tianxie" v-if="xueshengP">
                <div class="tbox">
                    <img src="./../image/close.png" alt="" @click="fnClose()" class="close">
                    <div class="box">
                        <h3>填写评价</h3>
                        <div class="p1" v-if="starFlag">
                            <span class="kh">评级</span>
                            <select @change="fnChange($event)">
                            <option :value="item.id" v-for="item in liveList" >{{item.name}}</option>
                        </select>
                        </div>
                        <div class="p1 p2">
                            <span>填写评语</span>
                            <textarea v-model="contents"></textarea>
                        </div>
                        <div class="btn" @click="fnXueSubmit" v-if="subFlag == 1">提交</div>
                    </div>
                </div>
                <div class="msk"></div>
            </div>
            <div class="play" v-if="videoFlag">
                <div class="playbox">
                    <video class="" :src="video" initial-time="0" autoplay="false" loop="false" muted="false" direction="0" bindplay="" bindpause="" bindended="" bindtimeupdate="" bindwaiting="" binderror="">
                
                </video>
                </div>

                <div class="msk" @click="mskClose"></div>
            </div>
        </div>
</body>
<script src="../libs/thirdpart/vue.js"></script>
<script src="./../../js/axios.js"></script>
<script src="../../js/base.js"></script>
<script>
    var token = sessionStorage.token;
    var AUTH_TOKEN = 'Bearer ' + token;
    var vm;
    axios.defaults.baseURL = 'https://api.moyadou.com';
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    window.onload = function() {
        if (!token) {
            window.location.href = './html/login.html'
        }
    }
    var starOffImg = "./image/icon_star.png";
    var starOnImg = "./image/icon_star_act.png";
    vm = new Vue({
            el: '#app',
            data: {
                tabList: [{
                    name: '上课管理',
                    status: 2
                }, {
                    name: '考核管理',
                    status: 1
                }, {
                    name: '上课历史',
                    status: 1
                }, {
                    name: '老师考核',
                    status: 2
                }],
                selectIndex: 2,
                token: token,
                status: 2,
                page: 1,
                pagesize: 10,
                classList: [],
                alertFlag: false,
                text: '',
                teacherInfo: {},
                kaoheList: [],
                tabFlag: true,
                appointment: [],
                appointmented: [],
                starIndex: 0,
                loginoutboxFlag: false,
                stars: [{
                    src: starOffImg,
                    active: false
                }, {
                    src: starOffImg,
                    active: false
                }, {
                    src: starOffImg,
                    active: false
                }, {
                    src: starOffImg,
                    active: false
                }, {
                    src: starOffImg,
                    active: false
                }],
                starNum: 0,
                contents: '',
                level_id: '',
                appoint_id: '',
                starFlag: true,
                tianxie: false,
                subFlag: 1,
                kechengFlag: false,
                kecheng: '',
                chakan: false,
                xiepignjiaFlag: 0,
                xueshengP: false,
                laoshiP: false,
                changeL: null,
                video: '',
                videoFlag: false
            },
            created() {
                this.fnGetTeacher()
                this.fnAppointmentx(true);
                this.getList();
                // this.fnExamination(true)
                // this.fnLive();
                // console.log(this.tabFlag)
            },
            mounted: function() {

            },
            methods: {
                fnPlayBack(id) {
                    axios.get('/api/class/playback/show?appoint_id=' + id)
                        .then((response) => {
                            console.log(response)
                            if (response.data.code == 10200) {
                                this.video = response.data.data.url;
                                this.videoFlag = true;
                            } else {
                                this.ToastOpen('response.data.msg')
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                mskClose() {
                    this.videoFlag = false;
                },
                loginBox() {
                    this.loginoutboxFlag = true;
                },
                loginOut() {
                    window.location.href = './html/login.html'
                },
                fnTextBook: function() {

                },
                fnClose: function() {
                    this.tianxie = false;
                    this.chakan = false;
                    this.xueshengP = false;
                    this.laoshiP = false
                },
                //api/teacher/train/level/show?appoint_id=1
                show: function(id) {
                    this.tianxie = true;
                    this.subFlag = 2;
                    this.chakan = true;
                    this.laoshiP = true;
                    // axios.get('/api/teacher/train/level/show?appoint_id=1')
                    axios.get('/api/teacher/train/level/show?appoint_id=' + id)
                        .then((response) => {
                            console.log(response)
                            if (response.data.code == 10200) {
                                this.contents = response.data.data.contents;
                                this.starNum = response.data.data.level_id;
                                this.status = response.data.data.status;
                                for (var i = 0; i < response.data.data.level_id; i++) {
                                    this.stars[i].active = true;
                                    this.stars.splice(i, 1, {
                                        src: starOnImg,
                                        active: true
                                    })
                                }
                            } else {
                                this.ToastOpen('response.data.msg')
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                fnChange(e) {
                    var ev = e.target.value
                    this.changeL = ev;
                },
                fnPingjia: function(item, index) {
                    this.appoint_id = item.id;
                    this.stuid = item.student_user_id;
                    this.classid = item.class_id;
                    this.tianxie = true;
                    this.subFlag = 1;
                    this.chakan = false;
                    this.xiepignjiaFlag = index;
                    this.laoshiP = true;
                },
                fnXuePingjia: function(item) {
                    this.xueshengP = true;
                    this.stuid = item.student_user_id;
                    this.appoint_id = item.id;
                    this.stuid = item.student_user_id;
                    this.classid = item.class_id;
                    if (item.level_id == 0) {
                        this.xueshengT = true
                    }
                },
                tongguo: function(index) {
                    if (index == 1) {
                        this.status = 1;
                        this.starFlag = true;
                    } else {
                        this.status = 2;
                        this.starFlag = false
                    }
                },
                fnSubmit: function() {
                    var level_id;
                    if (this.status == 2) {
                        level_id = 0
                    } else {
                        level_id = this.starNum
                    }
                    var parme = {
                        appoint_id: this.appoint_id,
                        // appoint_id: 2,
                        contents: this.contents,
                        level_id: level_id,
                        status: this.status
                    }
                    console.log(parme)
                    axios.post('/api/teacher/comment/create', parme)
                        .then((response) => {
                            console.log(response)
                            if (response.data.code == 10200) {
                                this.ToastOpen(response.data.msg);
                                this.fnExamination(true);
                                this.laoshiP = false;
                            } else {
                                this.ToastOpen(response.data.msg)
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                fnXueSubmit() {
                    var parme = {
                        student_user_id: this.stuid,
                        class_id: this.classid,
                        contents: this.contents,
                        level_id: this.changeL,
                        appoint_id: this.appoint_id,
                    }
                    console.log(parme)
                    axios.post('/api/teacher/comment/create', parme)
                        .then((response) => {
                            console.log(response)
                            if (response.data.code == 10200) {
                                this.ToastOpen(response.data.msg);
                                this.fnExamination(true);
                                this.xueshengP = false;
                            } else {
                                this.ToastOpen(response.data.msg)
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                getList() {
                    axios.get('/api/class/level/list')
                        .then((response) => {
                            console.log(response)
                            console.log(11111111)
                            if (response.data.code == 10200) {
                                this.liveList = response.data.data;
                            } else {
                                this.ToastOpen('response.data.msg')
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                rating: function(index) {
                    var total = this.stars.length; //星星总数
                    var idx = index + 1; //这代表选的第idx颗星-也代表应该显示的星星数量

                    //进入if说明页面为初始状态
                    if (this.starNum == 0) {
                        this.starNum = idx;
                        for (var i = 0; i < idx; i++) {
                            this.stars[i].src = starOnImg;
                            this.stars[i].active = true;
                        }
                    } else {
                        //如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
                        if (idx == this.starNum) {
                            for (var i = index; i < total; i++) {
                                this.stars[i].src = starOffImg;
                                this.stars[i].active = false;
                            }
                        }
                        //如果小于当前最高星级，则直接保留当前星级
                        if (idx < this.starNum) {
                            for (var i = idx; i < this.starNum; i++) {
                                this.stars[i].src = starOffImg;
                                this.stars[i].active = false;
                            }
                        }
                        //如果大于当前星级，则直接选到该星级
                        if (idx > this.starNum) {
                            for (var i = 0; i < idx; i++) {
                                this.stars[i].src = starOnImg;
                                this.stars[i].active = true;
                            }
                        }

                        var count = 0; //计数器-统计当前有几颗星
                        for (var i = 0; i < total; i++) {
                            if (this.stars[i].active) {
                                count++;
                            }
                        }
                        this.starNum = count;
                    }
                },

                fnSelcet: function(index) {
                    console.log(index)
                    console.log(this.starIndex)
                    this.starIndex = index + this.starIndex;
                    console.log(this.starIndex)
                },
                fnSelcetAct: function(index) {
                    this.starIndex = this.starIndex - index;
                },
                fnTabbar(index, status) {
                    if (index == 0) {
                        window.location.href = './../index.html'
                    }
                    if (index == 1) {
                        window.location.href = './kaoheguanli.html'
                    }
                    if (index == 2) {
                        window.location.href = './shangkelishi.html'
                    }
                    if (index == 3) {
                        window.location.href = './laoshikaohe.html'
                    }
                    // this.page = 1;
                    // this.selectIndex = index;
                    // this.status = status;
                    // this.appointment = [];
                    // this.appointmented = [];
                    // this.classList = [];
                    // this.kaoheList = [];
                    // this.kechengFlag = false;
                    // if (index == 0 || index == 2) {
                    //     this.tabFlag = true;
                    //     this.fnAppointmentx(true);
                    // } else {
                    //     this.tabFlag = false
                    //     this.fnExamination(true)
                    // }
                },
                //直播预约api/teacher/train/appointment/live/list
                // fnLive() {
                //     console.log(this.status + '&page=' + this.page + '&pagesize=' + this.pagesize)
                //     axios.get('/api/teacher/train/appointment/live/list')
                //         .then((response) => {
                //             console.log(response)
                //             if (response.data.code == 10200) {
                //                 if (response.data.data.length != 0) {
                //                     if (response.data.data.appointment.length != 0) {
                //                         this.appointment = response.data.data.appointment;
                //                     }
                //                     if (response.data.data.appointmented.length != 0) {
                //                         this.appointmented = response.data.data.appointmented;
                //                     }
                //                 }
                //             } else {
                //                 this.ToastOpen('response.data.msg')
                //             }
                //         })
                //         .catch(function(error) {
                //             console.log(error);
                //         });
                // },
                //课程列表
                fnAppointmentx(reload) {
                    if (reload) {
                        this.classList = [];
                        this.page = 1;
                    } else {
                        this.page++
                    }
                    console.log(this.status + '&page=' + this.page + '&pagesize=' + this.pagesize)
                    axios.get('/api/teacher/appointment/class/list?status=2&page=' + this.page + '&pagesize=' + this.pagesize)
                        .then((response) => {
                            console.log(response)
                            if (response.data.code == 10200) {
                                if (response.data.data.length != 0) {
                                    this.classList = this.classList.concat(response.data.data.data);
                                } else {
                                    this.kechengFlag = true;
                                    this.kecheng = '暂无课程'
                                    if (this.page > 1) {
                                        this.ToastOpen('没有更多了')
                                    }
                                }
                            } else {
                                this.ToastOpen('response.data.msg')
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                //考核管理
                // fnExamination(reload) {
                //     if (reload) {
                //         this.kaoheList = [];
                //         this.page = 1;
                //     } else {
                //         this.page++
                //     }
                //     console.log(this.status + '&page=' + this.page + '&pagesize=' + this.pagesize)
                //     axios.get('/api/teacher/train/examination/list?type=' + this.status + '&page=' + this.page + '&pagesize=' + this.pagesize)
                //         .then((response) => {
                //             console.log(response)
                //             if (response.data.code == 10200) {
                //                 if (response.data.data.data.length != 0) {
                //                     this.kaoheList = this.kaoheList.concat(response.data.data.data);
                //                 } else {
                //                     console.log(this.kechengFlag)
                //                     this.kechengFlag = true;
                //                     this.kecheng = '暂无考核';
                //                     if (this.page > 1) {
                //                         this.ToastOpen('没有更多了')
                //                     }
                //                 }
                //             } else {
                //                 this.ToastOpen('response.data.msg')
                //             }
                //         })
                //         .catch(function(error) {
                //             console.log(error);
                //         });
                // },
                ToastOpen(text) {
                    this.alertFlag = !this.alertFlag;
                    this.text = text;
                    setTimeout(() => {
                        this.alertFlag = !this.alertFlag;
                    }, 2000)
                },
                fnStartClass(index) {
                    if (index == 0) {
                        window.location.href = "./html/live.html?id=1&userId=" + encodeURI(encodeURI('ssss')) + "&userToken=eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwsVAABUvTslOLCjITFGyMjQxMDA2NTE2M4PIpFYUZBalAsVNTU2NDAwMIKIlmblgMQtzY3MTE0Oo2uLMdKCxriWFHmmJQf75ZRGBlq4RZgaJBZ6RITH6QaU5Ri7uBZUREYGm7j6WHiXmGYG2SrUAMc0xUA__"
                    }
                    if (index == 1) {
                        window.location.href = "./html/live.html?id=1&userId=" + encodeURI(encodeURI('wwqw')) + "&userToken=eJwtzM0KgkAYheF7mXXI5-yoCW1cFIWBMEa4jGaMLzVGR5sguvdkdHmeA**XlLkM3nogKaEBkI3fqPRrxBo9O9e71a1qbsagImnIAZjgLIqWR38MDnp2IQQFgEVH7LwlMWdhTLdrBR9ztrXTyV0OlSkre9STmvLi*oSut*pe7F3dSswSWpwbJpsd*f0BLAkyWQ__"
                    }
                    if (index == 2) {
                        window.location.href = "./html/live.html?id=1&userId=" + encodeURI(encodeURI('wwqw')) + "&userToken=eJwtzM0KgkAYheF7mXXI5-yoCW1cFIWBMEa4jGaMLzVGR5sguvdkdHmeA**XlLkM3nogKaEBkI3fqPRrxBo9O9e71a1qbsagImnIAZjgLIqWR38MDnp2IQQFgEVH7LwlMWdhTLdrBR9ztrXTyV0OlSkre9STmvLi*oSut*pe7F3dSswSWpwbJpsd*f0BLAkyWQ__"
                    }
                },
                fnGetTeacher() {
                    var _this = this;
                    axios.get('/api/user/teacher/show').then((res) => {
                        if (res.data.code == 10466) {
                            window.location.href = './login.html'
                        } else if (res.data.code == 10200) {
                            this.teacherInfo = res.data.data
                        }
                        console.log(res.data.data)
                    })
                }
            }
        })
        //获取滚动条当前的位置 
    function getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    //获取当前可视范围的高度 
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        } else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    }

    //获取文档完整的高度 
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

    //滚动事件触发
    window.onscroll = function() {
        if (getScrollTop() + getClientHeight() == getScrollHeight()) {
            if (vm.index == 0 || vm.index == 2) {
                vm.fnAppointmentx(false)
            } else {
                vm.fnExamination(false)
            }
        }
    }
</script>

</html>